<template>
  <div>
    <section class="section1">
      <CarouselSu :list="s1List" />
    </section>
    <section class="section2">
      <div class="content">
        <p class="animate_box">小米汽车首款作品</p>
        <p class="animate_box">Xiaomi SU7</p>
        <p class="animate_box">三年打磨，满怀敬畏之心</p>
        <p class="animate_box">十倍投入，自研关键技术</p>
        <p class="animate_box">融汇极致性能、经典设计与生态科技的</p>
        <p class="animate_box">C级高性能，生态科技轿车</p>
        <p class="animate_box">科技跨越，人车合一</p>
      </div>
      <div>
        <img class="img"
          src="https://s1.xiaomiev.com/activity-outer-assets/web/su7/2.jpg?x-fds-process=image/resize,q_90,f_webp">
      </div>
    </section>
    <section class="section3">
      <div class="text_wrap">
        <div class="leven1 animate_box">
          <p class="color_yl">外观设计</p>
        </div>
        <div class="leven2 animate_box">
          <p>优雅与速度感并存</p>
          <p>经得起时间考验的设计</p>
        </div>
        <div class="leven3 animate_box">
          <p>遵循「符合直觉」的美学设计理念，造就 Xiaomi SU7 经典的流畅车身线条。</p>
          <p>富有力量的车身线条与自然舒展的车身比例，让优雅与速度相得益彰。</p>
        </div>
      </div>
      <Carousel :list="s3List" />
    </section>
    <section class="section4">
      <CarouselSu :list="s4List" />
    </section>
    <section class="section5">
      <div class="content">
        <p class="leven1 animate_box">科技跨越，人车合一</p>
        <p class="leven2 animate_box">——更多信息，敬请期待——</p>
      </div>
      <div class="img_wrap">
        <img class="img"
          src="https://s1.xiaomiev.com/activity-outer-assets/web/su7/14.jpg?x-fds-process=image/resize,q_90,f_webp">
      </div>
    </section>
  </div>
</template>

<script>
import CarouselSu from '@/components/CarouselSu.vue';
import Carousel from '@/components/Carousel.vue';
export default {
  components: { CarouselSu, Carousel },
  middleware({ store, redirect }) {
    if (!store.state.user.token) {
      redirect({ name: 'login' })
    }
  },
  data: () => ({
    s1List: [{
      src: 'https://s1.xiaomiev.com/activity-outer-assets/web/su7/1-1.jpg?x-fds-process=image/resize,q_90,f_webp'
    }, {
      src: 'https://s1.xiaomiev.com/activity-outer-assets/web/su7/1-2.jpg?x-fds-process=image/resize,q_90,f_webp'
    }, {
      src: 'https://s1.xiaomiev.com/activity-outer-assets/web/su7/1-3.jpg?x-fds-process=image/resize,q_90,f_webp'
    }],
    s4List: [{
      src: 'https://s1.xiaomiev.com/activity-outer-assets/web/su7/5-1.jpg?x-fds-process=image/resize,q_90,f_webp',
      title: '海湾蓝',
      msgs: [
        '源自海平面下60米的纯净海水，在绿色到蓝色的临界点取色。',
        '车漆融入 20nm 色粉颗粒，在不同光照下优雅纯净，又千变万化。',
      ]
    }, {
      src: 'https://s1.xiaomiev.com/activity-outer-assets/web/su7/5-2.jpg?x-fds-process=image/resize,q_90,f_webp',
      title: '雅灰',
      msgs: [
        '源自雅丹地貌中经数百年风蚀沉淀的灰色岩层。低饱和度灰色，既不过于明亮，',
        '也不过于沉闷。克制的表达宁静而又平衡的美。',
      ]
    }, {
      src: 'https://s1.xiaomiev.com/activity-outer-assets/web/su7/5-3.jpg?x-fds-process=image/resize,q_90,f_webp',
      title: '橄榄绿',
      msgs: [
        '源自橄榄色的金属漆，和谐含蓄。在绿中带着一丝金黄，',
        '清新中带着暖意，沉稳中带有张力。',
      ]
    }],
    s3List: [
      {
        img: "https://s1.xiaomiev.com/activity-outer-assets/web/su7/3-1.jpg?x-fds-process=image/resize,q_90,f_webp",
        title: "黄金车身比例",
        desc: "遵循 3 倍轮轴比和 2 倍轮高比的黄金比例设计，车身比例舒展自然。",
      },
      {
        img: "https://s1.xiaomiev.com/activity-outer-assets/web/su7/3-2.jpg?x-fds-process=image/resize,q_90,f_webp",
        title: "优雅流畅车身",
        desc: "富有张力的肌肉感前轮包，流畅圆润的车身曲线，优雅与运动并存。",
      },
      {
        img: "https://s1.xiaomiev.com/activity-outer-assets/web/su7/3-3.jpg?x-fds-process=image/resize,q_90,f_webp",
        title: "水滴形大灯",
        desc: "水滴形态大灯轮廓，流畅自然。矩阵式 ADB 自适应大灯，智能照明调节。",
      },
      {
        img: "https://s1.xiaomiev.com/activity-outer-assets/web/su7/3-4.jpg?x-fds-process=image/resize,q_90,f_webp",
        title: "光环形尾灯",
        desc: "360 颗超红光 LED 组成渐层式动感光带，光效震撼，兼顾整体与细节的未来感设计。",
      },
    ]
  })
}
</script>

<style scoped>
@import url('../assets/css/su7.css');
</style>